<template>

         <div class="comment-list">
        
        <li v-for="(item,index) in list" :class="{act:item._is_create&&index==0}" >
             <div>
                 <img :src="item.info?.avatar" width="50" height="50"  alt="">
                 <span>{{item.info?.nickname}}</span>
             </div>
              <p>
                  {{item.content}}
              </p>
              <p>
                  {{item.create_time}}
              </p>

              <p @click="commentLikeToggle(item._id,item.is_like,index)">
                <van-icon :color="item.is_like?'red':'gray'"  name="good-job" />  
                  {{item.like_count>0?item.like_count:''}}
              </p>



              <p style="margin-top:10px" @click=" $emit('replyMsg',{item:{index,...item }})  ">
                 回复 {{item.reply_num}}
              </p>




              
        </li>
      </div>
 
</template>

<script>
export default {
   name:'comment-list',
    props:{
        list:{
            type:Array,
            default(){
                return []
            }
        },
        is_reply:{
              default:false
        }
    },
    methods:{
        commentLikeToggle(comment_id,is_like,index){

            let is_reply = this.is_reply
                
                this.$emit('commentLikeToggle',{comment_id,is_like,index,is_reply})
       
        }
    }

}
</script>
<style lang="scss">
@keyframes fade {
      0%{
        opacity: 0;
        transform: translateY(30px);
      }
      50%{
        opacity: .5;
        transform: translateY(20px);
      }
      100%{
        opacity: 1;
        transform: translateY(0);
      }
}

.comment-list{
    width: 100%;
     
     .act{ 
        transition: all 1s;
        animation:  fade 2s ease;
        
     }

    .active{
        color: red;
    }
     
}

</style>